<template>
    <view>
        <view class="header c-position_relative">
            <image class="avater" :src="unit.avatar" mode="aspectFill"></image>
            <view class="title c-position_absolute">
                {{unit.englishTitle}}
            </view>
        </view>
        <view class="body c-flex_column">
            <view class="section">
                <detail-operate-section :enTitle="engageOperate.enTitle" :cnTitle="engageOperate.cnTitle"
                    :operateList="engageOperate.operateList" @tapItem='tapItem'></detail-operate-section>
            </view>
            <view class="section">
                <detail-operate-section :enTitle="enrichOperate.enTitle" :cnTitle="enrichOperate.cnTitle"
                    :operateList="enrichOperate.operateList" @tapItem='tapItem'></detail-operate-section>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getUnitDetailData,
        getEngageOperate,
        getEnrichOperate,
        ENUM_OPERATE,
        gotoSubPages,
        getUnitWordData
    } from "./services/index.js"
    const _engageOperate = getEngageOperate();
    const _enrichOperate = getEnrichOperate();
    import detailOperateSection from "./components/detail-operate-section.vue";
    import UnitDetailModel from "./models/unitDetailModel.js";
    import QuestionModel from "./models/questionModel.js";
    export default {
        components: {
            detailOperateSection
        },
        data() {
            return {
                unitId: null,
                unit: null,
                engageOperate: _engageOperate,
                enrichOperate: _enrichOperate
            };
        },
        onLoad(options) {
            this.unitId = options.id;
            uni.startPullDownRefresh({

            })
        },
        onPullDownRefresh() {
            this.getUnitDetailData(this.unitId);
        },
        methods: {
            getUnitDetailData(id) {
                if (!id) {
                    uni.stopPullDownRefresh()
                } else {
                    let promises = [getUnitDetailData(id), getUnitWordData(id)];
                    Promise.all(promises).then(res => {
                        let detail = res[0];
                        let word = res[1]["1"];
                        this.unit = new UnitDetailModel(detail);
                        this.unit.dataProcessing(word.map(item => {
                            return new QuestionModel(item);
                        }))
                    }).finally(() => {
                        uni.stopPullDownRefresh();
                    })
                }
            },
            tapItem(e) {
                gotoSubPages(e.flag, this.unit);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .navi {
        padding: 24rpx;
        left: 0;
        right: 0;
        top: 0;
        z-index: 10;

        .navi-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            border: 1rpx solid #eee;

            background: #ffffffb4;
        }

        .back-button {}

        .operate-button-box {
            .operate-button {
                margin-left: 15rpx;
            }

            .operate-button:first-child {
                margin-left: 0;
            }
        }
    }

    .header {
        .avater {
            width: 100%;
            height: 450rpx;
        }

        .title {
            left: 20rpx;
            bottom: 30rpx;
            font-size: 30rpx;
            font-weight: 700;
            color: #fff;
        }
    }

    .body {
        background: #c3e0ff;

        .section {
            margin: 80rpx 60rpx;
            margin-bottom: 0;
        }

        .section:last-child {
            margin-bottom: 80rpx;
        }
    }
</style>